<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>用户注册</title>
    <script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
</head>

<body style="display: flex; justify-content: center; align-items: center; height: 100vh">

    <form>
        <div id="time"></div>
        <br>
        <label for="email">账号</label>
        <br>
        <input type="text" name="email" id="email">
        <br>
        <label for="password">密码</label>
        <br>
        <input type="password" name="password" id="password">
        <br>
        <button type="submit">注册</button>
        <button type="button" id="getUsers">获取用户列表</button>
    </form>
    <div id="userList"></div>
    <script>

        // 时间显示功能
        function updateTime() {
            axios.get("https://f.m.suning.com/api/ct.do", {
                headers: { "Content-type": "application/json" }
            })
                .then(response => {
                    let time = response.data.currentTime
                    let date = new Date(time * 1000)
                    document.getElementById('time').innerHTML = "当前时间显示" + date.toLocaleString()
                })
                .catch(err => {
                    console.error("时间获取失败:", err);
                });
        }
        updateTime();
        setInterval(updateTime, 1000);

        // 注册功能
        const form = document.querySelector('form')
        form.addEventListener('submit', e => {
            e.preventDefault();
            var user = new Object
            user.name = document.getElementById('email').value;
            user.password = document.getElementById('password').value;
            axios.defaults.withCredentials = false;
            axios.post("https://f.m.suning.com/api/ct.do", {
                msg: user.name
            })
                .then(response => {
                    console.log("注册成功:", response.data.msg);
                    alert(`注册成功！`);
                })
                .catch(err => {
                    console.error("注册失败:", err);
                    alert("注册失败");
                });
        });

        // 用户列表功能
        document.getElementById('getUsers').addEventListener('click', () => {
            axios.get("https://f.m.suning.com/api/ct.do", {
                headers: { "Content-type": "application/json" }
            })
                .then(response => {
                    console.log('response:', response);
                    const users = response.data.msg;
                    const listElement = document.getElementById('userList');
                    listElement.innerHTML = '';

                    if (users.length > 0) {
                        const ul = document.createElement('ul');
                        users.forEach(user => {
                            const li = document.createElement('li');
                            li.textContent = users;
                            ul.appendChild(li);
                        });
                        listElement.appendChild(ul);
                    } else {
                        listElement.textContent = '暂无注册用户';
                    }
                })
                .catch(error => {
                    console.error('获取用户列表失败：', error);
                    document.getElementById('userList').textContent = '获取用户列表失败';
                });
        });
    </script>
</body>

</html>